import { Component, OnInit } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';

import { LoginModel } from '../../models/auth.model';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Select, Store } from '@ngxs/store';
import { AuthService } from '../../services/auth.service';
import { AuthState } from '../../stores/auth/auth.state';
import { Observable } from 'rxjs';

@Component({
    selector: 'app-user-register',
    templateUrl: './user-register.component.html',
    styleUrls: ['./user-register.component.scss']
})
export class UserRegisterComponent implements OnInit{

    @Select(AuthState.userName) userName$: Observable<string>;

    visible = false;

    login: LoginModel =
        {
            username: '',
            password: '',
        } as LoginModel;

    dataForm: FormGroup;
    loadingState = false;


    constructor(private _formBuilder: FormBuilder, private _store: Store, private authService: AuthService, private nzMessageService: NzMessageService) {
        this.dataForm = this._formBuilder.group({
            userName: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(18)]],
            password: ['', [Validators.required, Validators.minLength(6), Validators.maxLength(18)]]
        });
    }


    ngOnInit() {
    }

    openModal(){
        this.visible = true;
    }

    closeModal(){
        this.visible = false;
    }

    /**
     * 登录验证
     */
    submit() {
        this.loadingState = true;
        this.authService.userRegister(this.login).subscribe((res) => {
            this.loadingState = false;
            if (res.success){
                this.nzMessageService.success(res.msg);
                this.closeModal();
            }
        });
    }


}
